<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="${pageContext.request.contextPath}/lib/static/login/images/favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>流程管理</legend>
        </fieldset>
    </div>
    <hr class="layui-bg-red">

    <!--按钮及查询框组-->
    <div class="layui-row">
        <div class="layui-col-md-offset1">
            <form class="layui-form">
                <div class="layui-inline">
                    <input class="layui-input" name="criteria" autocomplete="off" placeholder="申请人">
                </div>
                <button class="layui-btn layuiadmin-btn-admin" lay-submit="" lay-filter="search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </form>
        </div>
    </div>

    <table class="layui-hide" id="procedureTable" lay-filter="procedureMonitor"></table>

    <script type="text/html" id="procedureToolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="delAll">删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        </div>
    </script>

    <script type="text/html" id="procedurebar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        var url = '${pageContext.request.contextPath}/procedure/get';
        layui.use(['table','form'], function () {
            var table = layui.table;
            var form = layui.form;
            var tableProcedureIns = table.render({
                elem: '#procedureTable'
                , toolbar: '#procedureToolbar'
                , url: url
                /*修改默认向后台传递的页码、大小参数名 @ming*/
                , request: {
                    pageName: 'pageNo' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[{type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', align: 'center', sort: true}
                    , {field: 'type', title: '类型', align: 'center', sort: true} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , {field: 'title', title: '标题', align: 'center', sort: true}
                    , {field: 'name', title: '申请人', align: 'center', sort: true}
                    , {field: 'dept', title: '所在部门', align: 'center', sort: true}
                    , {field: 'time', title: '申请时间', align: 'center', sort: true}
                    , {field: 'status', title: '状态', align: 'center', sort: true} //单元格内容水平居中
                    , {field: 'context', title: '申请内容', align: 'center'} //单元格内容水平居中
                    , {fixed: 'right', title: '操作', toolbar: '#procedurebar', align: 'center', width: 150}
                ]]
                , page: {
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
                    , groups: 5
                }
            });

            //头工具栏事件
            table.on('toolbar(procedureMonitor)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'delAll':
                        var data = checkStatus.data;
                        layer.msg("多项删除");
                        break;
                    case 'add':
                        var data = checkStatus.data;
                        layer.open({
                            content: ['${pageContext.request.contextPath}/procedure/procedure_edit'],
                            type: 2,
                            title: '<h2>添加流程</h2>',
                            maxmin: true,
                            shadeClose: true, //点击遮罩关闭层
                            area: ['800px', '520px']
                        });
                        break;
                }
            });

            //监听行工具事件
            table.on('tool(procedureMonitor)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.msg("单项删除");
                } else if (obj.event === 'edit') {
                    layer.msg("编辑");
                }
            });

            form.on('submit(search)', function(data){
                tableProcedureIns.reload({
                    url: url
                    ,method:"post" /*解决参数传递中文乱码*/
                    ,where: data.field
                });

                return false;
            });
        });
    </script>
</div>
</body>
</html>
